<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>商城界面</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="assets/css/demo.css" rel="stylesheet">
  </head>

  <style>
<!--    #commodities-container img-->
<!--    {-->
<!--      width: 100%;-->
<!--    }-->

    #commodities-container>div
    {
      border: 1px solid #eaecf3;
      border-radius: 0.75rem;
      background-color: white;
      padding-top: 15px;
      box-shadow: 0 0 10px 2px #bdcee0;
      margin-left: 15px;
      margin-top: 20px;
    }

    /* #commodities-container
    {
      width: 1100px;
    } */

    #shopping-cart:hover
    {
      cursor: pointer;
    }

    #shopping-cart
    {
      border: none;
    }

    .active
    {
      background-color: orange;
    }

    .un-add
    {
      background-color: #288cff;
    }

  </style>

  <body>
    <nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
      <div class="container">
        <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse offcanvas-collapse" id="navbar_main">
          <ul class="navbar-nav ml-auto align-items-lg-center">
            <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>            
            <li class="nav-item">
              <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" target="_blank" class="nav-link d-lg-none">Download Free</a>
              <a class="btn btn-sm bg-white d-none d-lg-inline-flex" id="logout" href="/shopping-mall/logout">退出登录</a>
            </li>
            <div class="dropdown-divider d-lg-none my-4"></div>
            <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Social Media</h6>
          </ul>
        </div>
      </div>
    </nav>
    <main class="main">
      <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('assets/images/backgrounds/img-1.jpg')">
        <span class="mask bg-primary alpha-7"></span>
        <div class="spotlight-holder py-lg pt-lg-xl">
          <div class="container d-flex align-items-center no-padding">
            <div class="col">
              <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                <div class="col-7">
                  <div class="text-center mt-5">
                    <img src="assets/images/brand/icon.png" style="width: 200px;" class="img-fluid animated" data-animation-in="jackInTheBox" data-animation-delay="1000">
                    <h2 class="heading display-4 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                      欢迎光临 <span class="font-weight-700">西南大学</span> 网上购物商城
                    </h2>
                    <p class="lead text-white mt-3 lh-180 c-white animated" data-animation-in="fadeInUp" data-animation-delay="2500">
                      Welcome to <strong class="text-white">Southwest University </strong>online shopping mall
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="slice slice-lg" style="background-color: #FAFBFE;padding-bottom: 0%;">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-10">
              <!-- Typography -->
              <div class="row align-items-center mb-5">
                <div class="col-8">
                  <h2 class="heading h3 mb-0">首页</h2>
                </div>
                <div class="col-4 text-right">
                  <a href="cart.html" class="btn btn-sm btn-primary">我的购物车</a>
                </div>
              </div>
              <div class="row typeface-palette cols-xs-space cols-sm-space cols-md-space" id="commodities-container" style="display: flex;justify-content: center;margin-right: 0%;">

              </div>
            </div>  <!-- Color palette -->
          </div>    
        </div> 
      </section>         
      <!-- hhhhhhhhhhhh -->
      <section class="slice slice-lg bg-tertiary bg-cover bg-size--contain" style="background-image: url('assets/images/backgrounds/img-1.png'); background-position: center 10%;margin-bottom: 0px;">
        <span class="mask bg-primary alpha-7"></span>
        <div class="container text-center">
          <div class="row cols-xs-space cols-sm-space cols-md-space">
            <div class="col-12">
              <h2 class="heading text-white h1 strong-600">
                <!-- Complete features at your hand -->
              </h2>
              <div class="row justify-content-center mt-4">
                <div class="col-lg-8">
                  <p class="lead text-white">
                    <!--  Boomerang is a great free UI package based on Bootstrap 4 that includes the most important components and features so you can jumpstart the hard work and get right to the website creation fast and easy. -->
                  </p> 
                  <div class="btn-container mt-5">
                    <!-- <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-lg bg-white px-4">
                      Download Free
                    </a> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- Core -->
    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/popper/popper.min.js"></script>
    <script src="assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Page plugins -->
    <script src="assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <script src="assets/vendor/input-mask/input-mask.min.js"></script>
    <script src="assets/vendor/nouislider/js/nouislider.min.js"></script>
    <script src="assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
    <!-- Theme JS -->
    <script src="assets/js/theme.js"></script>

    <script>

      function createShopWindow(json)
      {
        var container = $("#commodities-container");
        var commodities = json["data"];

        container.empty()

        for(var i=0; i<commodities.length; i++) 
        {
            var commodity = commodities[i];
            addCommodityToContainer(container, commodity);
        }
      }

      function addToCart(productId)
      {
            console.log("添加"+productId);

            $.ajax({
                url: "./cart/AddToCart",
                method: "POST",
                data: { id: productId },
                success:function(data){}
            });
        }

      function addCommodityToContainer(container,commodity)
      {
        container.append(`<div class="col-sm-4" data-id=${commodity.id}>
                  <img src="../upload/${commodity.image}" alt="" style="object-fit: cover; height:140px;">
                  <h5 style="text-align:center;">${commodity.name}</h5>
                  <p>价格：${commodity.price}</p>
                  <p>产地：${commodity.origin}</p>
                  <p>种类：${commodity.category}</p>
                  <p>生产日期：${commodity.productionDate}</p><button class="badge badge-md typeface-badge badge-pill bg-primary text-white" id="shopping-cart" onclick="addToCart(${commodity.id})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
                    <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                  </svg></button>
                </div>`);
      }

      function showAllCommodities()
      {
          fetch('../administrator/commodity/list')
              .then(response => response.json())
              .then(data => createShopWindow(data))
              .catch(error => console.log(error));
           console.log("fetch data")
      }

      $(document).ready(function(){
        var shoppingCart = document.querySelectorAll("#shopping-cart");
        for(var i=0;i<shoppingCart.length;i++)
        {
          shoppingCart[i].addEventListener("click",function(){
            this.classList.remove("bg-primary");
            this.classList.add("active");
          })
        }
        showAllCommodities();
    });

    </script>
  </body>
</html>
